<template>
    <div class="blog">
        <div class="list">
            <b-row>
                <b-col xl="4" lg="4" md="4" sm="12" v-for="(item,index) in items" :key="index" class="item">
                    <div class="inner" @click="toDetail(item)">
                        <div class="img"><img class="img-fluid" :src="item.coverImage"></div>
                        <p class="title">{{item.title}}</p>
                        <p class="time">{{item.issueDate | filterDate}}</p>
                    </div>
                </b-col>
            </b-row>
        </div>
        <b-pagination align="center" v-model="currentPage" :total-rows="total" :per-page="perPage" v-show="total>0"></b-pagination>
    </div>
</template>

<script>
import { GetLists } from '@/api'
import { filterLocaleType, fmtDate } from '@/utils'
export default {
    name: 'report',
  	data () {
		return {
			lanType: 2,
            items: [],
            total: 0,
            perPage: 9,
            currentPage: 1,
		}
    },
    filters:{
        filterDate(date){
            return fmtDate(date)
        }
    },
    mounted(){
		this.lanType = filterLocaleType(this.$i18n.locale)
		this.fetchData()
    },
    watch:{
		'$i18n.locale'(n, o) {
			this.lanType = filterLocaleType(n)
			this.fetchData()
        },
        currentPage(n){
            this.currentPage = n
            this.fetchData()
        }
	},
    methods:{
		fetchData(){
			GetLists({
				categoryId: 4,
				lanType: this.lanType,
				page:this.currentPage,
				size:this.perPage
			}).then((res)=>{
                this.items = res.dataList
                this.total = res.totalElements
			})
        },
        toDetail(item){
            if(item.link){
                window.open(item.link)
            }else{
                this.$router.push({
                    path: '/detail',
                    query: {
                        id: item.id,
                        tab: 2
                    }
                })
            }
		}
	}
}
</script>

<style lang="scss" scoped>
.blog{
    padding: 40px 10px 0 10px;
    .list{
        min-height:400px;
    }
    .item{
        margin-bottom: 60px;
        .inner{
            cursor: pointer;
            display: inline-block;
            border: 1px solid #e6e6e6;
            transition: all 0.3s;
            &:hover{
                box-shadow: 0px 15px 10px -15px #ccc;
            }
            .img{
                width: 100%;
                height: 200px;
                overflow: hidden;
            }
            .title{
                text-align: left;
                color: #333333;
                height: 40px;
                line-height: 20px;
                margin: 0 20px;
                margin-top: 20px;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
            }
            .time{
                text-align: left;
                font-size: 14px;
                margin: 5px 20px 20px;
                color: #999;
            }
        }
    }
}
</style>
